<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" th:href="@{/static/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/static/lib/layui-v2.8.3/css/layui.css}" media="all">
    <style>
        .layui-panel{
            height: 100%;
        }
        .my-panel{
            margin-top: 50px;
        }
        .my-panel li {
            text-align: center;
            height: 50px;
            line-height: 50px;
            background-color: #28333E;
            color: rgb(191, 187, 187);
        }
        .my-panel li.active {
            color: #FFFFFF;
            background-color: #1e9fff;
        }
        .my-panel li:hover {
            cursor: pointer;
            color: #FFFFFF;
            background-color: #cccccc;
        }
        .my-badge{
            padding: 3px;
            width: 100px;
            height: 20px;
        }
        .room-container{
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        .room-container .room-parent{
            height: 200px;
            flex-basis: 150px;
            margin: 10px;
            box-shadow: 2px 2px 2px 2px #ccc;
        }
        .room-container div{
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="layui-row" id="app">
    <div class="layui-col-xs2">
        <div class="layui-panel my-panel">
            <div style="padding: 32px;">
                <ul>
                    <li v-for="item in floorList" :class="item.value == floor? 'active':''" @click="changeFloor(item.value)">{{ item.name }}</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="layui-col-xs10">
        <div class="layui-panel">
            <div class="layui-row">
                <div class="layui-col-xs8 layui-col-xs-offset4">
                    <span v-for="item in roomStatusList" :class="'layui-bg-' + item.remarks" class="layui-badge my-badge">{{ item.name }}</span>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs12 room-container">
                    <div class="room-parent" v-for="(item, index) in roomList">
                        <template v-for="statusItem in roomStatusList">
                           <div v-if="item.roomState == statusItem.value" class="room" :class="'layui-bg-' + statusItem.remarks" @click="checkin(index)" >
                               <p>{{ item.roomNum }}</p>
                               <p>{{ item.roomTypeObj.type }}</p>
                               <p>{{ item.roomTypeObj.price / 100.0 }}</p>
                           </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/static/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/layui-v2.8.3/layui.js}" charset="utf-8"></script>
<script src="/static/lib/vue/vue.global.js"></script>
<script th:inline="javascript">
    let ctx = [[${#httpServletRequest.getContextPath()}]];
    let roomStatusList = /*[[${roomStatusList}]]*/ [];
</script>
<script>
    // 创建 VUE 实例
    const app = Vue.createApp({
        data(){
            return {
                floorList: [
                    {name: '一楼', value: 1},
                ], // 楼层列表
                roomList: [], // 房间列表
                roomStatusList: [], // 房间状态列表
                floor: 1, // 当前楼层
            }
        },
        methods:{
            // 切换楼层
            changeFloor(index){
                this.floor = index;
                this.getRoomList();
            },
            // 获取房间列表
            getRoomList(){
                let _that = this;
                $.ajax({
                    url: ctx + '/checkin/roomList',
                    type: 'get',
                    data: {
                        floor: this.floor
                    },
                    success: function (data){
                        if (data.code == 200) {
                            _that.roomList = data.data;
                        }
                    }
                })
            },
            // 获取房间状态
            getRoomStatus(){
                let _that = this;
                $.ajax({
                    url: ctx + '/checkin/roomStatusList',
                    type: 'get',
                    success: function (data){
                        if (data.code == 200) {
                            _that.roomStatusList = data.data;
                        }
                    }
                })
            },
            // 获取楼层信息
            getFloorList(){
                let _that = this;
                $.ajax({
                    url: ctx + '/checkin/floorList',
                    type: 'get',
                    success: function (data){
                        if (data.code == 200) {
                            _that.floorList = data.data;
                        }
                    }
                })
            },
            // 入住登记，获取房间号
            checkin(index){
                let _that = this;
                let item = this.roomList[index];
                let id = item.id;
                let status = item.roomState;
                if (status == 0){
                    layer.open({
                        type: 2,
                        title: '入住登记',
                        maxmin:true,
                        area: ['100%', '100%'],
                        content: ctx + '/checkin/checkin/' + id,
                        end: function (){
                            _that.getRoomList();
                        }
                    });
                }

            }
        },
        created(){ // 创建时调用
            this.getRoomStatus();
            this.getFloorList();
            this.getRoomList();
        }
    });

    // 挂载
    const vm = app.mount("#app");

</script>

</body>
</html>